<template>
  <div class="Character">
      <div class="CharSearch">
        <div class='CharSearch__find'>
          <el-input 
            class='CharSearch__find--input'
            placeholder="请输入要查找的文字或拼音首字母"
            icon="search"
            v-model="findval"
            @change = 'findvalfn'
            :on-icon-click="findvalfn">
          </el-input>
        </div>
        <el-dropdown trigger="click" @command="stateChange" class='CharSearch__group'>
          <el-button>
            {{ showState }}<i class="el-icon-caret-bottom el-icon--right"></i>
          </el-button>
          <el-dropdown-menu class="no-border" slot="dropdown">
            <el-dropdown-item v-for='(item,index) in searchState' :divided ='index == 2' :command='item' key='index'>{{ item }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="CharSearch__count">共<span> {{ count }} </span>个基础汉字</div>
      </div>
      <div class="CharFont">
        <div class="CharModo" v-for='(item,key,index) in charDev'>
            <div class="CharModo__title flex" v-show='stateCode == 0'>{{ key }}开头的汉字</div>
            <div class="CharModo__title flex" v-show='stateCode == 1'>{{ key }}开头的汉字</div>
            <div class="CharModo__title flex" v-show='stateCode == 2'>所有基础汉字</div>
            <div class="CharModo__title flex" v-show='stateCode == 3'>您查找到的汉字</div>
            <ul class="CharModo__con clearfix">
               <li class="CharModo__con--item" v-for='(items,indexs) in item'>
                <div v-for = "(itemss,keyss,indexss) in items">
                   <span>{{ keyss }}</span>
                   <span>{{ itemss }}</span>
                </div>
               </li>
            </ul>
        </div>
      </div>
  </div>
</template>
<script>
import Tool from '@/util/Tool'
import datas from './chardata'

export default {
    name: 'Character',
    data () {
        return {
            chars:datas,
            charDev:{},
            allChars:[],
            stateCode:'1',
            searchState:['顺序','混合'],
            showState:'排序方式',
            findval:'',
            count:0,
            waitTime:0,
        }
    },
    methods:{
      stateChange(command){
        switch(command){
          case '顺序':
               this.$message({
                  message: '当前以 ' +command+' 的形式展示文字',
                  type: 'success',
                  duration:'1500'
               });
               this.showState = '顺序';
               this.stateCode = '0';
               this.count = 0;
               for(let i in this.chars){
                  for(let j in this.chars[i]){
                      this.count++;
                  }
               }
               this.charDev = this.chars;
               break;
          case '混合':
               this.$message({
                  message: '当前以 ' +command+' 的形式展示文字',
                  type: 'success',
                  duration:'1500'
               });

               this.stateCode = '2';
               this.charDev = {};
               this.allChars = [];
               for(var i in this.chars){
                  this.allChars = this.allChars.concat(this.chars[i]);
               }
            
               this.charDev.default = Tool.shuffle(this.allChars);
               this.count = this.charDev.default.length;
               this.showState = '混合';
               break;
          default:
               this.$message({
                  message: '当前显示 ' +command+'开头的文字',
                  type: 'success',
                  duration:'1500'
               });
               this.showState = '单字母开头';
               this.stateCode = '1';
               this.charDev = {};
               this.charDev[command] = this.chars[command];
               this.count = this.charDev[command].length;
               break;
        }
      },
      findvalfn(){
        var _this = this;
        if(this.waitTime){ //如果当前定时器已经存在就关闭
           clearTimeout(_this.waitTime)
        }
        this.waitTime = setTimeout(function(){//用户操作后个100毫秒做出相应
          console.log(22)
          _this.stateCode = 3;
          _this.showState = '搜索';
          _this.charDev = {'default':[]};
          for(let i in _this.chars){
             for(let j in _this.chars[i]){
                for(let k in _this.chars[i][j]){
                   if(_this.findval != ''){
                     if(_this.findval.indexOf(_this.chars[i][j][k]) != -1){
                         _this.charDev.default.push(_this.chars[i][j]);
                     }
                   }
                }
             }
          }
          if(_this.findval == ''){
             _this.stateChange('顺序')
          }else if(/^(A|B|C|D|E|F|G|H|J|K|L|M|N|O|P|Q|R|S|T|W|X|Y|Z)$/i.test(_this.findval)){
             _this.stateChange(_this.findval.toUpperCase());
             _this.showState = '单字母开头';
          }
          if(_this.charDev.default.length !=0 ){
            _this.count = _this.charDev.default.length;
          }
        },500)
      },
    },
    created(){
    	this.charDev = this.chars;
      this.count = 0;
      for(let i in this.chars){
         for(let j in this.chars[i]){
             this.count++;
         }
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang = 'scss'>
   .Character{
   	  width: 100vw;
   	  height: 100vh;
   	  background:#e2e2e2;
   	  display: flex;
   	  flex-direction:column;
   }
   .CharSearch{
   	  width: 90%;
   	  padding:0.185rem 0.556rem;
   	  margin: 0.185rem auto;
   	  border-radius: 0.093rem;
   	  background: #fff;
   }
   .CharSearch__find{
      width:50%;
      float: left;
      margin-right: 0.37rem;
   }
   .CharSearch__count{
      float: right;
      line-height: 0.667rem;
      font-size: 0.296rem;
      color:#999;
   }
   .CharFont{
   	  flex:1;
   	  width: 90%;
      margin:0 auto;
   	  overflow-y: scroll;
      background: #fff;
      border-radius: 0.093rem;
      padding: 0 0.556rem;
      border-bottom: 0.556rem solid #fff;
      border-top: 0.556rem solid #fff;
   }
   .CharModo{
      width: 100%;
      border:1px solid #EAE3DD;
      margin-bottom: 0.37rem;

   }
   .CharModo__title{
      height: 0.833rem;
      background: #FCF7F2;
      color:#C00;
      font-size: 0.296rem;
      font-weight: 700;
      letter-spacing: 0.037rem;
   }
   .CharModo__con{
      border-top: 1px solid #EAE3DD;
      width: 100%;
      li{
        padding: 0.278rem 0;
        display: inline-block;
        width: 10%;
        border-bottom: 1px solid #EAE3DD;
        &:hover{
          background:#ccc;
          transition:all .5s;
          & > div span{
            color:#fff;
          }
        };
        &:not(:nth-child(10n)){
           border-right: 1px solid #EAE3DD;
        };
        & > div span{
           display: block;
           text-align: center;
           font-size: 0.259rem;
           color:#3F3F3F;
        }
      }
   }
   @media screen and (max-width:600px){
      .CharSearch__find{
         width:100%;
         margin-bottom: 0.278rem;
      }
      .CharModo__con li{
         width: 20%;
         border-right: none !important;
         &:not(:nth-child(5n)){
            border-right: 1px solid #EAE3DD !important;
         };
       }
   }
   @media screen and (min-width:600px) and (max-width:960px){  
      .CharSearch__find{
         width:40%;
      }
   }  
</style>
